<template>
	<view class="score-container">
		<view class="fenlei_title">
			<view class="fenlei_h">作业名称：</view>
			<input v-model="workName" class="fenlei_is_css" placeholder="请输入作业名称" />
		</view>
		<view @click="search" class="but_css" type="primary">查询</view>

		<view class="list_end_css" v-for="(item,index) in tableData" :key="index">
			<view class="list_p">序号：{{index+1}}</view>
			<view class="list_p">作业名称：{{item.workName}}</view>
			<view class="list_p">下发时间：{{item.startTime}}</view>
			<view class="list_p">结束时间：{{item.endTime}}</view>
			<view class="list_p">作业说明：{{item.remark}}</view>
			<view class="but_css" @click="handleClick(item)" type="text" size="small">查看</view>
		</view>

		<view class="guding_cheng" v-if="tScoreDialogShow" id="scoreBoxDialogVisible">
			<view class="guding_close" @click="initScoreList">X</view>
			<view style="width: 100%">
				<view style="text-align:left;">
					<view class="fenlei_title">
						<view class="fenlei_h">院系：</view>
						<view class="fenlei_is_css" @click="acti_click1">{{fenlei_is1?fenlei_is1:'请选择院系'}}</view>
						<w-picker mode="selector" :default-props="activity_type" default-type="name"
							@confirm="onTypeConfirm1($event)" ref="activity_is1" :options="depaList2"></w-picker>
					</view>

					<view class="fenlei_title">
						<view class="fenlei_h">专业：</view>
						<view class="fenlei_is_css" @click="acti_click2">{{fenlei_is2?fenlei_is2:'请选择专业'}}</view>
						<w-picker mode="selector" :default-props="activity_type" default-type="name"
							@confirm="onTypeConfirm2($event)" ref="activity_is2" :options="profList2"></w-picker>
					</view>

					<view class="fenlei_title">
						<view class="fenlei_h">级别：</view>
						<view class="fenlei_is_css" @click="acti_click3">{{fenlei_is3?fenlei_is3:'请选择级别'}}</view>
						<w-picker mode="selector" :default-props="activity_type" default-type="name"
							@confirm="onTypeConfirm3($event)" ref="activity_is3" :options="gradeList2"></w-picker>
					</view>

					<view class="fenlei_title">
						<view class="fenlei_h">班级：</view>
						<view class="fenlei_is_css" @click="acti_click4">{{fenlei_is4?fenlei_is4:'请选择级别'}}</view>
						<w-picker mode="selector" :default-props="activity_type" default-type="name"
							@confirm="onTypeConfirm4($event)" ref="activity_is4" :options="clazzList2"></w-picker>
					</view>
					<view class="flex">
						<view class="but_css" @click="getWorkScoreListTea" type="danger">查询</view>
						<view class="but_css" @click="dialogFormReset" type="danger">重置</view>
					</view>
				</view>
				<view class="list_end_css" v-for="(item,index) in tScoreTaskedListByTea2" :key="index">
					<view class="list_p">序号：{{index+1}}</view>
					<view class="list_p">学号：{{item.stuNo}}</view>
					<view class="list_p">姓名：{{item.stuName}}</view>
					<view class="list_p">院系：{{item.depa}}</view>
					<view class="list_p">专业：{{item.prof}}</view>
					<view class="list_p">级别：{{item.grade}}</view>
					<view class="list_p">班级：{{item.className}}</view>
					<view class="list_p">作业名称：{{item.workName}}</view>
					<view class="list_p">下发时间：{{item.createTime}}</view>
					<view class="list_p">成绩：{{item.score}}</view>
					<view class="list_p">专业：{{item.remark}}</view>
					<view class="list_p">任务状态：
						<view v-if="item.workStatus == 1">未读</view>
						<view v-else-if="item.workStatus == 2">未完成</view>
						<view v-else-if="item.workStatus == 3">已完成</view>
					</view>
					<view class="but_css" @click="handleShowStuScore(item)" type="text" size="small">查看</view>
				</view>

			</view>
		</view>
		<view class="guding_cheng2" v-if="stuScoreBoxDialogVisible">
			<view class="guding_close" @click="initScoreList2">X</view>
			<view style="w100">

				<view class="exam-form w100">
					<view class="exam-label">学生成绩:</view>
					<view class="exam-value">{{ res_info ? (res_info.score || 0) : 0 }}</view>
				</view>

				<view class="exam-form w100">
					<view class="exam-label">课程主题:</view>
					<view class="exam-value">{{ res_info ? (res_info.typeName || "") : "" }}</view>
				</view>
				<view class="exam-form">
					<view class="exam-label">章节:</view>
					<view class="exam-value">
						{{ res_info ? (res_info.typeDetail || "") : "" }}
					</view>
				</view>
			</view>

			<view class="exam-form w100">
				<view class="exam-label">答题详情:</view>
				<view class="exam-value"></view>
			</view>

			<view class="exam_list">
				<view class="exam-item" v-for="(item, i) in exam_list" :key="i">
					<view style="display: flex;width: 100%;">
						<view class="exam-title"> {{ i + 1 }}: </view>
						<view class="exam-content">
							<span style="font-weight: bolder;" v-if="item.type == 1">(单选题)</span>
							<span style="font-weight: bolder;" v-if="item.type == 2">(多选题)</span>
							<span style="font-weight: bolder;" v-if="item.type == 3">(判断题)</span>
							{{ item.title }}
						</view>
					</view>
					<view style="display: flex;width: 100%;margin-top: 10px;" v-if="item.type in [1,2]">
						<view class="exam-title">选项:</view>
						<view class="exam-content" style="text-indent: 0;">
							<p v-for="(option, index) in item.choose" :key="option">
								<span>{{ xuanxiang[index] }}</span>:
								<span>{{ option }}</span>
							</p>
						</view>
					</view>
					<view class="exam-item-answers" style="width: 100%; position: relative;">
						<view class="exam-item-title">答题:</view>
						<view style="display: flex; align-items: center;flex: 1;">
							<template v-if="item.type == 1">
								<span>{{ xuanxiang[item.stuAnswer - 1] }}</span>
							</template>
							<template v-if="item.type == 2">
								<span v-for="answer in item.stuAnswer" :key="answer">{{ xuanxiang[answer - 1] }}</span>
							</template>
							<template v-if="item.type == 3">
								<span v-if="item.stuAnswer == 1">√</span>
								<span v-if="item.stuAnswer == 2">×</span>
							</template>
						</view>
						<view style="position: absolute; right: 50px;" v-if="!item.isTrue">
							正确答案:
							<template v-if="item.type == 3">
								{{ item.testAnswer[0] == 1 ? "√" : "×" }}
							</template>
							<template v-else>
								<span v-for="item in item.testAnswer" :key="item">{{ xuanxiang[(item - 1)] }}</span>
							</template>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				tableData: [],
				fenlei_is1: '',
				fenlei_is2: '',
				fenlei_is3: '',
				fenlei_is4: '',
				fenlei_is5: '',
				activity_type: {
					"label": "name",
					"value": "id"
				},
				dialogVisible: false,


				tScoreDialogShow: false,
				selectedDepa2: [],

				tScoreTaskedListByTea: [], // 任务成绩列表
				tScoreTaskedListPageNo: 1, // 当前页面
				tScoreTaskedListTotal: 0, // 总行数
				tScoreTaskedPageSize: 5, // 每页行数
				tScoreDialogShow: false,
				tScoreTaskedListByTea2: [], // 任务成绩列表
				tScoreTaskedListPageNo2: 1, // 当前页面
				tScoreTaskedListTotal2: 0, // 总行数
				tScoreTaskedPageSize2: 5, // 每页行数

				depaList2: [],
				selectedProf2: "",
				selectedGrade2: "", // 选中的年级
				selectedClazz2: "", // 选中的班级

				profList2: [], // 教师的专业列表
				gradeList2: [], // 教师的级别列表
				clazzList2: [], // 班级列表

				pageNo: 1,
				pageSize: 5,
				total: 0,
				workName: "",

				dialogPageNo: 1,
				dialogPageSize: 10,
				dialogTotal: 0,


				stuScoreBoxDialogVisible: false,
				res_info: null,
				exam_list: [],
				xuanxiang: ['A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I']
			}
		},
		created() {
			this.getWorkListTea();
		},
		methods: {
			acti_click1() {
				this.$refs.activity_is1.show();
			},
			onTypeConfirm1(val) {
				this.fenlei_is1 = val.result
				this.selectedDepa2 = val.result
				this.selectDepa2(val.result)
			},
			acti_click2() {
				this.$refs.activity_is2.show();
			},
			//专业
			onTypeConfirm2(val) {
				this.fenlei_is2 = val.result
				this.selectedProf2 = val.result
				this.selectProf2(val.result)
			},
			acti_click3() {
				this.$refs.activity_is3.show();
			
			},
			onTypeConfirm3(val) {
				this.fenlei_is3 = val.result
				this.selectedGrade2 = val.result
				this.selectGrade2(val.result)
			},
			acti_click4() {
				this.$refs.activity_is4.show();
			},
			onTypeConfirm4(val) {
				this.fenlei_is4 = val.result
				this.selectedClazz2 = val.value
				this.selectClazz2()
			},
			onReachBottom() {
				console.log('[]', "sadadad")
				this.pageNo += 1
				this.dialogPageNo += 1
				this.getWorkListTea();
				this.getWorkScoreListTea()
			},
			handleShowStuScore(data) {
				this.stuScoreBoxDialogVisible = true;
				this.getWorkDetailTea(data);
			},
			getWorkDetailTea(data, fn) {
				const {
					stuId
				} = data;
				const {
					workId
				} = this;
				console.log(data)
				this.pyReq(
					this.$http.getWorkDetailTea, {
						workId,
						stuId
					},
					(res) => {
						if (res.code == 0) {
							this.res_info = res.result;
							this.exam_list = (res.result.testDetail || []).map(item => {
								var str1 = null;
								var str2 = null;
								var option = [];
								if (typeof item.choose == "string") {
									option = (item.choose || "").split("##").filter(item => item);
								} else {
									option = item.choose || [];
								}
								if (item.stuAnswer) {
									str1 = (item.stuAnswer || []).map(item => item - 0).sort().join("");
								}
								if (item.right) {
									str2 = (item.right || []).map(item => item - 0).sort().join("");
								}
								var stuAnswer = "";
								if (item.type == 1 && item.stuAnswer) {
									stuAnswer = item.stuAnswer[0] - 0;
								}
								if (item.type == 2 && item.stuAnswer) {
									stuAnswer = item.stuAnswer.map(item => item - 0).sort();
								}
								if (item.type == 3 && item.stuAnswer) {
									stuAnswer = item.stuAnswer[0];
								}
								return {
									...item,
									choose: option,
									isTrue: str1 == str2,
									testAnswer: item.right.map(item => item - 0).sort(),
									stuAnswer: stuAnswer || item.stuAnswer,
								};
							});

						}
					}
				);
			},
			tScoreTaskedExportExcel(element, title) {
				this.pageSize = 999999;
			},
			tScoreTaskedExportExcel2(element, title) {
				this.dialogPageSize = 999999;
			},
			exportScore() {
				uni.showToast({
					title: '即将开放'
				})

			},
			search() {
				this.getWorkListTea();
			},
			getWorkListTea() {
				const {
					pageNo,
					pageSize,
					workName
				} = this;
				this.pyReq(
					this.$http.getWorkListTea, {
						pageNo,
						pageSize,
						workName
					},
					(res) => {
						console.log(res);
						if (res.code == 0) {
							this.tableData = this.tableData.concat(res.result.records);
							this.total = res.result.total;
						}
					}
				);
			},
			dialogFormReset() {
				this.selectedDepa2 = "";
				this.selectedProf2 = "";
				this.selectedGrade2 = "";
				this.selectedClazz2 = "";
				
				this.fenlei_is1 = "";
				this.fenlei_is2 = "";
				this.fenlei_is3 = "";
				this.fenlei_is4 = "";
				this.getWorkScoreListTea();
			},
			getWorkScoreListTea() {
				const {
					dialogPageNo,
					dialogPageSize,
					selectedDepa2,
					selectedProf2,
					selectedGrade2,
					selectedClazz2,
					workId,
				} = this;

				this.pyReq(
					this.$http.getWorkScoreListTea, {
						pageNo: dialogPageNo,
						pageSize: dialogPageSize,
						depa: selectedDepa2,
						prof: selectedProf2,
						grade: selectedGrade2,
						classId: selectedClazz2,
						workId,
					},
					(res) => {
						if (res.code == 0) {
							if (res.result) {
								this.tScoreTaskedListByTea2 = this.tScoreTaskedListByTea2.concat(res.result.records) ||
									[];
								this.dialogTotal = res.result.total;
							} else {
								this.tScoreTaskedListByTea2 = [];
								this.dialogTotal = 0;
							}
						}
					}
				);
			},
			handleClick(data) {
				this.workId = data.workId;
				this.tScoreDialogShow = true;
				this.getWorkScoreListTea();
				this.getAllDepaList();
			},
			handleSizeChange(pageSize) {
				this.pageSize = pageSize;
				this.getWorkListTea();
			},
			handleCurrentChange(currentPage) {
				this.pageNo = currentPage;
				this.getWorkListTea();
			},
			initScoreList() {
				this.tScoreDialogShow = false
			},
			initScoreList2() {
				this.stuScoreBoxDialogVisible = false
			},

			// 选择班级2
			selectClazz2() {},
			// 选择院系2
			selectDepa2(val) {
				let that = this;
				that.selectedProf2 = "";
				that.selectedGrade2 = "";
				that.selectedClazz2 = "";
				// that.checkedClazzList=[];//选中的班级
				that.clazzList2 = []; // 班级列表
				if (val == "选课") {
					that.fenlei_is1 = "选课";
					that.fenlei_is2 = "选课";
					that.fenlei_is3 = "选课";
					that.fenlei_is4 = "选课";
					
					that.profList2[0] = "选课";
					that.selectedProf2 = "选课";
					that.selectedGrade2 = "选课";
					that.profList2 = [];
					that.gradeList2 = [];
					this.getAllClazzList2("选课", "选课", "");
				} else {
					that.getAllProfList2(that.selectedDepa2);
					this.getAllClazzList2(
						this.selectedDepa2,
						this.selectedProf2,
						this.selectedGrade2
					);
				}
			},
			getAllProfList2(depa) {
				let that = this;
				that.pyReq(that.$http.getAllProfList, {
					depa: depa
				}, (res)=> {
					res.result.forEach((item, index) => {
						that.profList2.push({
							'name': item,
							'id': index,
						})
					});
				});
			},

			// 选择专业2
			selectProf2(val) {
				this.getAllClazzList2(
					this.selectedDepa2,
					this.selectedProf2,
					this.selectedGrade2
				);
				this.getAllGradeList2(this.selectedDepa2, this.selectedProf2);
				this.selectedGrade = "";
			},
			// 选择年级2
			selectGrade2(val) {
				this.getAllClazzList(
					this.selectedDepa2,
					this.selectedProf2,
					this.selectedGrade2
				);
			},

			// 根据教师和专业列出所有班级2
			getAllClazzList2(depa, prof, grade) {
				let that = this;
				that.pyReq(
					that.$http.getAllClazzList, {
						depa: depa,
						prof: prof,
						grade: grade
					},
					(res)=> {
						res.result.forEach((item, index) => {
							that.clazzList2.push({
								'name': item.clazzName,
								'id': item.classId,
							})
						});
					}
				);
			},

			// 根据教师和专业列出所有班级
			getAllClazzList(depa, prof, grade) {
				let that = this;
				that.pyReq(
					that.$http.getAllClazzList, {
						depa: depa,
						prof: prof,
						grade: grade
					},
					(res)=> {
						res.result.forEach((item, index) => {
							that.clazzList.push({
								'name': item.clazzName,
								'id': item.classId,
							})
						});
					}
				);
			},

			// 获取教师选择的年级2
			getAllGradeList2(depa, prof) {
				let that = this;
				that.pyReq(
					that.$http.getAllGradeList, {
						depa: depa,
						prof: prof
					},
					(res)=> {
						console.log('----',res.result)
						res.result.forEach((item, index) => {
							that.gradeList2.push({
								'name': item,
								'id': index,
							})
						});
					}
				);
			},

			// 获取所有院系
			getAllDepaList() {
				let that = this;
				that.pyReq(that.$http.getAllDepaList, {}, (res)=> {
					res.result.forEach((item, index) => {
						that.depaList2.push({
							'name': item,
							'id': index,
						})
					});
				});
			},

			// 获取任务成绩列表2
			tScoreTaskedPageChange2(val) {
				this.dialogPageNo = val;
				this.getWorkScoreListTea();
			},
			// 每页行数发生变化2
			tScoreTaskedPageSizeChange2(val) {
				this.dialogPageSize = val;
				this.getWorkScoreListTea();
			},
		}
	}
</script>

<style lang="scss" scoped>
	.flex{
		display: flex;
	}
	.guding_close {
		position: fixed;
		right: 15px;
		top: 55px;
		text-align: center;
		font-size: 18px;
		padding: 8px;
		color: #B31610;
		background: #ddd;
		border: 1px solid #B31610;
		border-radius: 7px;
		width: 30px;
		height: 30px;
	}

	.guding_cheng {
		width: 96%;
		height: 600px;
		position: fixed;
		top: 44px;
		left: 0;
		background: #fff;
		padding: 2%;
		overflow-y: scroll;
		padding-bottom: 20px;
		z-index: 9;
	}

	.guding_cheng2 {
		width: 96%;
		height: 600px;
		position: fixed;
		top: 44px;
		left: 0;
		background: #fff;
		padding: 2%;
		overflow-y: scroll;
		padding-bottom: 20px;
		z-index: 99;
	}

	.list_end_css {
		border: 1px solid #B31610;
		border-radius: 7px;
		margin: 5px;
		padding: 8px;
	}

	.but_css {
		background-color: rgb(166, 14, 10);
		margin: 10px auto;
		width: 100px;
		border-radius: 7px;
		color: #fff;
		line-height: 30px;
		text-align: center;
		font-size: 15px;
	}

	.shangchuan_css {
		background-color: rgb(166, 14, 10);
		margin: 10px auto;
		width: 100px;
		border-radius: 7px;
		color: #fff;
		line-height: 30px;
		text-align: center;
		font-size: 15px;
	}

	.xuanze_css {
		width: auto;
		flex: 1;
		border: 1px solid #ddd;
		padding-left: 5px;
		height: 30px;
	}

	.radio_css {
		margin: 10px;
	}

	/deep/.uni-radio-input-checked {
		color: #B31610;
		background-color: #B31610 !important;
		border-color: #B31610 !important;
	}

	/deep/.uni-radio-input-checked::before {
		background-color: #B31610;
		color: #B31610;
	}

	.timu_css {
		line-height: 30px;
		font-size: 15px;
	}

	.timu_css_sed {
		display: flex;
		justify-content: space-between;
	}

	.timu_css_sed input {
		border: 1px solid #ddd;
		border-radius: 7px;
		width: 80%;
		padding-left: 5px;
		height: 30px;
	}

	.fenlei_title {
		padding: 0 5px;
		display: flex;
		justify-content: space-between;
	}

	.fenlei_h {
		font-size: 15px;
		line-height: 25px;
		margin-top: 5px;
		text-align: center;
	}

	.fenlei_h b {
		color: #B31610;
	}

	.fenlei_is_css {
		overflow: hidden;
		width: 75%;
		line-height: 25px;
		border: 1px solid #ddd;
		border-radius: 7px;
		padding-left: 5px;
		margin-top: 5px;
		height: 27px;
	}

	.exam-container {
		border: 1px solid #eee;
		border-radius: 10px;
		padding: 5px;
		width: 90%;
		margin: 5px auto;
	}

	.exam-list {
		text-align: left;
	}

	.exam-item {
		margin-bottom: 30px;


	}

	.exam-item-options,
	.exam-item-answers {
		display: flex;
		align-items: center;
	}

	.exam-item-answers {
		margin-top: 10px;
	}

	.exam-item-option {
		flex: 1;
		display: flex;
		align-items: center;
		font-size: 16px;
		font-weight: bold;
		margin-bottom: 10px;
	}

	.exam-item-title {
		font-weight: bolder;
		font-size: 16px;
	}

	.exam-checkbox-group {
		display: flex;
		align-items: center;
	}

	.exam-checkbox {
		margin-right: 30px;
		width: 50px;


	}

	.el-checkbox__label {
		padding: 0;
	}

	.exam-radio-group {
		margin-left: -10px;
		display: flex;
		align-items: center;
	}

	.exam-radio {
		margin-right: 30px;
		width: 50px;
	}
</style>
